<template>
  <div class="import-container">
    <el-card>
      <h2>{{ title }}导入</h2>
      <el-alert
        title="每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项"
        type="warning"
        show-icon
      />
      <UploadExcel :on-success="successHandler" />
    </el-card>
  </div>
</template>

<script>
import { importEmployees } from '@/api/employees'
import UploadExcel from '../../components/UploadExcel/index.vue'
import { formatExcelDate } from '../../utils/index'
export default {
  name: 'Import',
  components: {
    UploadExcel
  },
  computed: {
    title() {
      switch (this.$route.query.type) {
        case 'employee':
          return '员工'

        case 'departments':
          return '组织架构'

        default:
          return '不对哦'
      }
    }
  },
  methods: {
    async successHandler(data) {
      // console.log(data)
      const newArr = data.results.map(v => {
        v.correctionTime = formatExcelDate(v.correctionTime, '/')
        v.timeOfEntry = formatExcelDate(v.timeOfEntry, '/')
        return {
          ...v
        }
      })
      // console.log(newArr)
      await importEmployees(newArr)
      this.$message.success('批量导入成功！')
      this.$router.push({ path: '/employees' })
    }
  }
}
</script>

<style lang="scss">
.import-container {
  //   background-color: #fff;
  padding: 20px;
  .el-card {
    text-align: center;
  }
  .el-alert {
    margin: 50px 0;
  }
}
</style>
